<template>
	<view class="hotdep">
		<!-- 头部 -->
		<view class="mzyy_title">
			<view class="mzyy_yuyue font15 font-989898">
				<view>全部</view>
				<view>医生</view>
			</view>
			<view class="time_list">
				<view v-for="(item,index) in timeList" :key="index" class="time_listbos" v-show="item.getDay"
					@click="Ontime(item)">
					<view class="time_listbox" :class="item.date == day?'background_6bcbb6':'background_ffffff'">
						<view :class="item.date == day?'font-ffffff':'font-989898'" class="font11">{{item.getDay}}
						</view>
						<view :class="item.date == day?'font-ffffff':'font-6bcbb6'" class="font13">{{item.getDate}}号
						</view>
						<view :class="item.date == day?'font-ffffff':'font-c8c8c8'" class="font10">{{item.status}}</view>
					</view>
				</view>
			</view>
			<view class="title_choice" @click="Onchoice">
				<image src="../../static/arrow-circle-down.png"></image>
			</view>
		</view>
		<!-- 医生 -->
		<view class="collect_bos" v-if="list.length>0">
			<!-- 循环 -->
			<view class="collect_list" @click="Ondocyy(item)" v-for="(item,index) in list" :key="index">
				<image :src="item.img"></image>
				<view class="collect_box">
					<view class="collect_name font15 font-323232 font-b">{{item.name}}
						<view class="mzyy_infobox">
							<text class="font-b">余号:{{item.hang_number_count}}</text>
							<view class="font-ffffff font12">￥{{item.hang_number_work_info.money}}</view>
						</view>
					</view>
					<view class="collect_title font14 font-646464">{{item.academic_title_name}}</view>
					<view class="collect_info font13 font-989898 ellipsis">{{item.be_good_at}}</view>
				</view>
			</view>
		</view>
		<view v-else class="loading">暂无医生</view>
		<Com-popuptime ref="compopuptime" @OnComconfirm="OnComconfirm"></Com-popuptime>
	</view>

</template>

<script>
	import ComPopuptime from '@/components/ComPopuptime.vue';
	export default {
		components: {
			ComPopuptime
		},
		data() {
			return {
				id: null,
				list: [], //数据
				day: '', //当前选中的日期
				timeList: []
			}
		},
		onLoad: function(options) {
			this.id = options.id
			//日期列表
			this.Ontimelist()
		},
		methods: {
			// 日期列表
			Ontimelist() {
				this.$Http({
					url: 'weekDate',
					token: false,
					data: {
						room_id: this.id,
					}
				}).then(res => {
					this.timeList = this.$base.OnDate(res.data)
					this.day = res.data[0].date
					//获取医生列表
					this.Ondoctorlist()
				})
			},
			//获取医生列表
			Ondoctorlist() {
				this.$Http({
					url: 'doctorHangNumberList',
					token: false,
					data: {
						room_id: this.id,
						time: this.day
					}
				}).then(res => {
					res.data.forEach(item => {
						item.img = this.$store.state.http_img + item.img
					})
					this.list = res.data
				})
			},
			//选择时间
			Ontime(e) {
				this.day = e.date
				this.Ondoctorlist()
			},
			//查看时间
			Onchoice() {
				this.$refs.compopuptime.Onshow(this.timeList, this.day);
			},
			//关闭弹窗
			Onclose() {
				this.setData({
					popupshow: false
				})
			},
			//组件确认
			OnComconfirm(e) {
				this.day = e
				this.Ondoctorlist()
			},
			//前往医生预约
			Ondocyy(item) {
				uni.navigateTo({
					url: '/pagesA/register/docyy?id=' + item.id + '&day=' + this.day,
				});
			},
		}
	}
</script>

<style>
	.hotdep {
		height: 100%;
		background-color: #f9f9f9;
	}

	/* 头部 */
	.mzyy_title {
		width: 750rpx;
		height: 126rpx;
		display: flex;
		border-top: 1rpx solid #e8eaec;
		position: relative;
	}

	.mzyy_yuyue {
		width: 124rpx;
		height: 126rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.time_list {
		width: 626rpx;
		height: 126rpx;
		overflow: hidden;
		overflow-x: scroll;
		white-space: nowrap;
		padding-right: 86rpx;
	}

	.time_listbos {
		width: 124rpx;
		height: 126rpx;
		display: inline-block;
	}

	.time_listbox {
		width: 124rpx;
		height: 126rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.background_ffffff {
		background-color: #ffffff;
	}

	.background_6bcbb6 {
		background-color: #6bcbb6;
	}

	.title_choice {
		height: 126rpx;
		width: 86rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #e8eaec;
	}

	.title_choice image {
		width: 36rpx;
		height: 36rpx;
	}




	/* 医生 */

	.collect {
		height: 100%;
		background-color: #f9f9f9;
	}

	.collect_list {
		width: 690rpx;
		padding: 30rpx;
		margin: 30rpx;
		border-bottom: 1rpx #eeeeee solid;
		background: #ffffff;
		display: flex;
		align-items: center;
	}

	.collect_list image {
		width: 120rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}

	.collect_box {
		width: 510rpx;
		height: 140rpx;
		padding-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.collect_name {
		display: flex;
		justify-content: space-between;
	}

	.mzyy_infobox {
		display: flex;
	}

	.mzyy_infobox view {
		padding: 6rpx 16rpx;
		background-color: #6bcbb6;
		border-radius: 6rpx;
		margin-left: 20rpx;
	}

	.loading {
		font-size: 28rpx;
		text-align: center;
		padding: 30rpx 0;
		color: #969696;
	}
</style>
